import React, { useState, useEffect } from 'react';
import { Input, Button, Select } from 'antd';
import Slider  from 'rc-slider'; // 引入rc-slider作为滑动条组件
import 'rc-slider/assets/index.css'; // 引入rc-slider的样式
import './index.scss';

// 随机颜色
function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

const { Option } = Select;

function Test() {
  const [danmakuList, setDanmakuList] = useState([
    { content: '弹幕', left: '100%', speed: 0.4, top: `${Math.random() * 80 + 10}%`, color: getRandomColor() },
    // ... 其他弹幕项
  ]);
  const [newDanmakuContent, setNewDanmakuContent] = useState('');
  const [isDanmakuOpen, setIsDanmakuOpen] = useState(true);
  const [defaultSpeed, setDefaultSpeed] = useState(0.4); // 默认速度
  const [selectedColor, setSelectedColor] = useState('#FFFFFF'); // 默认颜色，可以设置为随机或特定颜色
   //显示隐藏弹幕设置
   const[isVisible, setIsVisible] = useState(false);
  
   const handleToggleClick=()=>{
    setIsVisible(!isVisible);
   }
  useEffect(() => {
    let timer;
    if (isDanmakuOpen) {
      timer = setInterval(() => {
        setDanmakuList(prevDanmakuList =>
          prevDanmakuList.map(danmaku => ({
            ...danmaku,
            left: `${parseFloat(danmaku.left.slice(0, -1)) - (danmaku.speed || defaultSpeed)}%`,
          }))
        );
      }, 30);
    } else {
      clearInterval(timer);
    }
    return () => clearInterval(timer);
  }, [isDanmakuOpen, defaultSpeed]);

  const addDanmaku = () => {
    if (newDanmakuContent) {
      const left = '90%';
      const top = `${Math.random() * 80 + 10}%`;
      const speed = defaultSpeed; // 使用默认速度或允许用户自定义速度（需添加逻辑）
      const color = selectedColor || getRandomColor(); // 使用选定颜色或随机颜色
      setDanmakuList([
        ...danmakuList,
        { content: newDanmakuContent, left, top, speed, color },
      ]);
      setNewDanmakuContent('');
    }
  };

  const handleColorChange = value => {
    setSelectedColor(value);
  };

  const handleSpeedChange = value => {
    setDefaultSpeed(value / 100); // 将滑动条的值（0-100）转换为速度值（0-1）
  };

  return (
    <div className="video-barrage">
      <div className="danmaku-container">
        <Input
          value={newDanmakuContent}
          onChange={e => setNewDanmakuContent(e.target.value)}
          placeholder="输入弹幕内容"
          className="danmaku-input"
        />
        <Button type="primary" onClick={addDanmaku}>
          发送
        </Button>
        <Button type="primary" onClick={() => setIsDanmakuOpen(!isDanmakuOpen)}>
          {isDanmakuOpen ? '关闭弹幕' : '打开弹幕'}
        </Button>
        <Button type='primary' onClick={handleToggleClick}>{isVisible ? '隐藏' : '显示'}</Button>
        {
          isVisible &&(
             <div className='danmaku-control'>
            <div style={{ marginLeft:600, marginTop:-60  }}>
          <label>颜色: </label>
          <Select style={{ width: 100  }} onChange={handleColorChange} defaultValue={selectedColor}>
            
            <Option value="#FF0000">红色</Option>
            <Option value="#00FF00">绿色</Option>
            <Option value="#0000FF">蓝色</Option>
            <Option value="#FFFF00">黄色</Option>
            <Option value="#FF00FF">紫色</Option>
            <Option value="#00FFFF">青色</Option>
           
            {/* 可以添加更多颜色选项 */}
          </Select>
        </div>
        <div style={{ marginLeft:600, marginTop:-3,  width:'300px' }} >
          <label>速度: </label>
          <Slider
            min={0}
            max={100}
            value={defaultSpeed * 100}
            onChange={handleSpeedChange}
          />
        </div>
        </div>
          )
        }
        
       
        <div className="danmaku-list">
          {danmakuList.map((danmaku, index) => (
            <div
              key={index}
              className={`danmaku-item ${isDanmakuOpen ? 'active' : ''}`}
              style={{
                position: 'absolute',
                left: danmaku.left,
                top: danmaku.top,
                whiteSpace: 'nowrap',
                color: danmaku.color,
              }}
            >
              {danmaku.content}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default Test;
